<template>
	<div class="nav-bar">
		<div class="left">
			<i v-if="setting.getCollapse" class="iconfont icon-arrow-right" @click="setting.setCollapse()"></i>
			<i v-else class="iconfont icon-arrow-left" @click="setting.setCollapse()"></i>
			<el-breadcrumb class="bread" separator-class="el-icon-arrow-right">
				<el-breadcrumb-item
					v-for="(item, index) in menu.breadList"
					:key="index"
					:to="item.name === '首页' ? { path: item.path } : ''"
					@click="item.name === '首页' ? home() : ''"
				>
					{{ item.name }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="right">
			<el-input v-model="search" class="radius" placeholder="请输入内容">
				<template #prefix>
					<i class="iconfont icon-search"></i>
				</template>
			</el-input>
		</div>
	</div>
</template>

<script setup>
import { settingStore, menuStore } from '@/store';
import { ref } from 'vue';

const setting = settingStore();
const menu = menuStore();
const home = () => {
	menu.setBreadList([
		{
			path: '/',
			name: '首页',
		},
	]);
};
const search = ref('');
</script>

<style lang="scss" scoped>
@import '@/assets/common/nav.scss';
.nav-bar {
	height: $height;
	line-height: $height;
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	.icon-arrow-left,
	.icon-arrow-right {
		font-size: $fontSize;
	}

	.left {
		display: flex;
		.bread {
			margin-left: 10px;
			line-height: $height;
		}
	}
	.right {
		.el-input {
			width: 150px;
			border-radius: 100px;
		}
	}
}
</style>
